<template>
  <!-- 灾情报送首页统计图 -->
  <div class="Emergency">
    <div class="flex location-wrap">
      <span class="white">当前位置：</span>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/EDManagement' }">应急处置</el-breadcrumb-item>
        <el-breadcrumb-item>灾情信息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="Emergency-center">
      <div class="Emergency-dt">
        <!-- 地图 -->
        <SjMapList @typeNames="childData" />
      </div>
      <div class="Emergency-tb">
        <!-- 搜索 开始 -->
        <div class="Emergency-tb-bd" style="margin-bottom:5px;">
          <!-- <div class="select">
            <el-select v-model="eventCode" placeholder="请选择" style="width:100%" @change="changes">
              <el-option v-for="item in yjsj_options" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </div> -->
          <SelectOptions :value="eventCode" :options="yjsj_options" @change="changes" />
        </div>
        <!-- 搜索 结束 -->
        <!-- 信息 开始 -->
        <div class="overflowHideen">
          <div class="text_content" style="padding: 0 8px 0 6px;">
            <el-row
              style="margin-top: 10px;color:#fff;font-size: 16px;margin-left: 6px; font-family: Microsoft YaHei;font-weight: bold;">
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">影响范围：{{ boxDataList.effectRange }}</div>
              </el-col>
            </el-row>
            <el-row
              style="margin: 10px 0;color:#fff;font-size: 16px;margin-left: 6px;font-family: Microsoft YaHei;font-weight: bold;">
              <el-col :span="24">
                <div class="grid-content bg-purple-dark">发生时间：{{ boxDataList.occurrenceTime }}</div>
              </el-col>
            </el-row>
            <el-row style="color:#fff;font-size: 16px;margin-left: 6px;font-family: Microsoft YaHei;font-weight: bold;">
              <el-col :span="24">
                <!-- <el-tooltip class="item" effect="dark" :content="boxDataList.incidentOutline" placement="top"> -->
                <div class="grid-content bg-purple-dark">事件概要：{{ boxDataList.incidentOutline }}</div>
                <!-- </el-tooltip> -->
              </el-col>
            </el-row>
          </div>
        </div>
        <!-- 信息结束 -->
        <!--  -->
        <div class="conter_content">
          <div class="one_num">
            <div class="border_line">
              <el-container>
                <el-header height="40px" style="color:#fff;font-size: 16px;">关联预警通知单</el-header>
                <div class="content_font" v-if="boxDataList.warningNoticeName !== null">
                  <div class="guowang">{{ boxDataList.warningNoticeName }}</div>
                  <div class="huangse" style="border: 1px solid red; color:red;" v-if="boxDataList.warningLvCode === '4'">
                    红色</div>
                  <div class="huangse" style="border: 1px solid orange; color:orange;"
                    v-if="boxDataList.warningLvCode === '3'">橙色</div>
                  <div class="huangse" style="border: 1px solid yellow; color:yellow;"
                    v-if="boxDataList.warningLvCode === '2'">黄色</div>
                  <div class="huangse" style="border: 1px solid blue; color:blue;"
                    v-if="boxDataList.warningLvCode === '1'">蓝色</div>
                </div>
              </el-container>
            </div>
            <div class="border_line" style="margin-top:4px; height: 100%;">
              <el-container style="height: 20%;">
                <el-header height="40px" style="color:#fff;">
                  <div class="weather_situation">
                    <div>天气情况</div>
                    <div v-if="tianqiData.length > 0">数据更新时间：{{ tianqiData[0].writeTime }}</div>
                    <div v-else>数据更新时间：</div>
                  </div>
                </el-header>
              </el-container>
              <div style="height: 120px;">
                <div style="margin-top: 10px;" class="tianqiqingkuang">
                  <div class="tianqi" v-if="tianqiData.length > 0">
                    <img width="100px" height="100px"
                      :src="require(`../../../assets/img/tqtb/${tqtbObj[tianqiData[0].dgdWp12]}.png`)" alt="">
                  </div>
                  <div class="tianqi" v-else>
                  </div>
                  <div class="wendu">
                    <div class="one">
                      <span v-if="tianqiData.length > 0">最高温：{{ tianqiData[0].tmax }}℃</span>
                      <span v-else>最高温：</span>
                      <span v-if="tianqiData.length > 0" style="margin-left: 30px;">最低温：{{
                        tianqiData[0].tmin }}℃</span>
                      <span v-else style="margin-left: 30px;">最低温：</span>
                    </div>
                    <div class="two" v-if="tianqiData.length > 0">降水量：{{ tianqiData[0].er03 }}mm</div>
                    <div class="two" v-else>降水量：</div>
                    <div class="three" v-if="tianqiData.length > 0">
                      <span>风向：{{ tianqiData[0].eda10Direct }}</span>
                      <span style="margin-left: 45px;">风力：{{ tianqiData[0].eda10 }}级</span>
                    </div>
                    <div class="three" v-else>
                      <span>风向：</span>
                      <span style="margin-left: 45px;">风力：</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="border_line" style="margin-left:10px;">
            <div class="VideoCard">
              <div class="cardTitle flexBetween padding5-10 fontSize16">
                <div class="titleName" style="font-size: 16px;">现场视频</div>
                <a>更多<i class="el-icon-d-arrow-right" color="#fff"></i></a>
              </div>
              <div class="flexAround Search">
                <el-input size="small" v-model="form.place" placeholder="请输入地点" class="right">
                </el-input>
                <el-button size="small" type="primary">搜索</el-button>
              </div>
              <div class="flexAround margin10 vidoeDiv" ref="iframeRef">
                <div class="img" v-for="index in arr" :key="index">
                  <video :id="`flv-${index}`" muted controls controlsList="nodownload" />
                </div>
              </div>
            </div>
          </div>

        </div>
        <!--  -->
      </div>
    </div>
    <!--  -->
    <div class="Emergency-tb-bt">
      <div style="margin-top: 10px; border: 1px solid #22588f; padding: 0 10px">
        <div class="display_flex color_fff">
          <div style="margin: 6px 0">
            <span style="color: #fff; font-size: 16px">灾情信息统计表</span>
            <span style="color: #F2F2F2; font-size: 14px; margin-left: 10px">报送时间：{{ tableDataBottom.reportTime }}</span>
          </div>
          <div style="color:#fff;font-size: 16px;cursor:pointer;" @click="handleMore">更多<i class="el-icon-d-arrow-right"
              color="#fff"></i></div>
        </div>
        <!-- :header-cell-style="{
            background: '#265CFF',
            color: '#fff',
            border: '1px solid #fff',
          }" -->
        <!-- <el-table
          border
          :header-cell-style="tableHeaderColor"
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="font-size: 18px;"
          size="small"
          :row-class-name="tableRowClassName"
        >
          <el-table-column label="输电线路" align="center">
            <el-table-column prop="name" align="center" label="500kV及以上">
              <el-table-column align="center" label="跳闸">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#FF4F4F;">{{scope.row.tz0}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复" style="font-size: 14px;">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;">{{scope.row.tz0}}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="name" align="center" label="220kV">
              <el-table-column align="center" label="跳闸">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#FF4F4F;">{{scope.row.tz0}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;">{{scope.row.tz0}}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="name" align="center" label="110kV">
              <el-table-column align="center" label="跳闸">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#FF4F4F;border-bottom: 1px solid #FF4F4F;">{{scope.row.tz2}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;border-bottom: 1px solid #2EDF66;">{{scope.row.tz1}}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="name" align="center" label="35kV">
              <el-table-column align="center" label="跳闸">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#FF4F4F;border-bottom: 1px solid #FF4F4F;">{{scope.row.tz5}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;border-bottom: 1px solid #2EDF66;">{{scope.row.tz4}}</div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column label="变电站" align="center">
            <el-table-column prop="name" align="center" label="500kV及以上">
              <el-table-column prop="province" align="center" label="停运">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#31BAEE;">{{scope.row.tz0}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;">{{scope.row.tz0}}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="name" align="center" label="220kV">
              <el-table-column prop="province" align="center" label="停运">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#31BAEE;">{{scope.row.tz0}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;">{{scope.row.tz0}}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="name" align="center" label="110kV">
              <el-table-column prop="province" align="center" label="停运">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#31BAEE;border-bottom: 1px solid #31BAEE;">{{scope.row.tz2}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;border-bottom: 1px solid #2EDF66;">{{scope.row.tz1}}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column prop="name" align="center" label="35kV">
              <el-table-column prop="province" align="center" label="停运">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#31BAEE;border-bottom: 1px solid #31BAEE;">{{scope.row.tz4}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;border-bottom: 1px solid #2EDF66;">{{scope.row.tz3}}</div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column label="配电线路" align="center">
            <el-table-column prop="name" align="center" label="10kV">
              <el-table-column align="center" label="跳闸">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#FF4F4F;">{{scope.row.pdtz}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="province" align="center" label="恢复">
                <template slot-scope="scope">
                  <div class="content_center" style="color:#2EDF66;">{{scope.row.pdhf}}</div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
          <el-table-column label="台区及用户" align="center">
            <el-table-column label="台区" align="center">
              <el-table-column prop="ljtd" label="停电" align="center" min-width="100">
                <template slot-scope="scope">
                  <div style="color:#31BAEE;">{{scope.row.tqtd}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="ljhf" label="恢复" align="center" min-width="100">
                <template slot-scope="scope">
                  <div style="color:#2EDF66;">{{scope.row.tqhf}}</div>
                </template>
              </el-table-column>
              <el-table-column prop="hfl" label="恢复率" align="center" width="100">
                <template slot-scope="scope">
                  <div style="color:#2EDF66;">{{scope.row.tqhfl}}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="用户" align="center">
              <el-table-column
                prop="ljtd"
                align="center"
                label="停电"
                width="100"
              >
                <template slot-scope="scope">
                  <div style="color:#31BAEE;">{{scope.row.yhtd}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="ljhf"
                align="center"
                label="恢复"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div style="color:#2EDF66;">{{scope.row.yhhf}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="hfl"
                align="center"
                label="恢复率"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div style="color:#2EDF66;">{{scope.row.yhhfl}}</div>
                </template>
              </el-table-column>
            </el-table-column>
            <el-table-column label="重要用户" align="center">
              <el-table-column
                prop="ljtd"
                align="center"
                label="停电"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div style="color:#31BAEE;">{{scope.row.zyyhtd}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="ljhf"
                align="center"
                label="恢复"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div style="color:#2EDF66;">{{scope.row.zyyhhf}}</div>
                </template>
              </el-table-column>
              <el-table-column
                prop="hfl"
                align="center"
                label="恢复率"
                min-width="100"
              >
                <template slot-scope="scope">
                  <div style="color:#2EDF66;">{{scope.row.zyyhhfl}}</div>
                </template>
              </el-table-column>
            </el-table-column>
          </el-table-column>
        </el-table> -->

        <!--  -->

        <!--  -->
        <table border="1" cellspacing="0" cellpadding="10" width="100%" align="center">
          <thead>
            <tr class="firstHead">
              <th colspan="8" style="background: #1F55E4;height: 40px;font-size: 18px;font-weight: bold;">输电线路</th>
              <th colspan="8" style="background: #2A60EA;height: 40px;font-size: 18px;font-weight: bold;">变电站</th>
              <th colspan="2" style="background: #3F71F2;height: 40px;font-size: 18px;font-weight: bold;">配电线路</th>
              <th colspan="9" style="background: #5880E9;height: 40px;font-size: 18px;font-weight: bold;">台区及用户</th>
            </tr>
            <tr class="twoHead">
              <!-- 输电线路 -->
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">500kV及以上</th>
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">220kV</th>
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">110kV</th>
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">35kV</th>
              <!-- 变电站 -->
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">500kV及以上</th>
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">220kV</th>
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">110kV</th>
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">35kV</th>
              <!-- 配电 -->
              <th colspan="2" style="height: 40px;font-size: 18px;font-weight: bold;">10kV</th>
              <!-- 台区 -->
              <th colspan="3" style="height: 40px;font-size: 18px;font-weight: bold;">台区</th>
              <th colspan="3" style="height: 40px;font-size: 18px;font-weight: bold;">用户</th>
              <th colspan="3" style="height: 40px;font-size: 18px;font-weight: bold;">重要用户</th>
              <!-- <th>岗位津贴</th>
                    <th>生活补贴</th>
                    <th>小计</th> -->
              <!-- <th>院聘</th>
                    <th>院聘</th> -->
            </tr>
          </thead>
          <tbody>
            <tr>
              <!-- 输电500 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">跳闸</div>
                <div @click="hanleSd500(tableDataBottom.sdxl500KvTrip)"
                  style="font-size: 17px; font-weight: bold;color: #FF4F4F;"
                  :class="tableDataBottom.sdxl500KvTrip ? 'borderBottomRed' : ''">{{ tableDataBottom.sdxl500KvTrip || "0"
                  }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold; color: #2EDF66;">{{ tableDataBottom.sdxl500KvRecover ||
                  "0" }}
                </div>
              </td>
              <!-- 输电220 -->
              <td colspan="1" align="center">
                <div @click="hanleSd220(tableDataBottom.sdxl220KvTrip)" style="margin-bottom: 10px; font-size: 18px;">跳闸
                </div>
                <div style="font-size: 17px; font-weight: bold;color: #FF4F4F;margin: 0 auto;"
                  :class="tableDataBottom.sdxl220KvTrip ? 'borderBottomRed' : ''">{{ tableDataBottom.sdxl220KvTrip ||
                    "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;">{{ tableDataBottom.sdxl220KvRecover ||
                  "0" }}
                </div>
              </td>
              <!-- 输电 110 -->
              <td colspan="1" align="center">
                <div @click="hanleSd110(tableDataBottom.sdxl110KvTrip)" style="margin-bottom: 10px; font-size: 18px;">跳闸
                </div>
                <div style="font-size: 17px; font-weight: bold;color: #FF4F4F;margin: 0 auto;"
                  :class="tableDataBottom.sdxl110KvTrip ? 'borderBottomRed' : ''">{{ tableDataBottom.sdxl110KvTrip ||
                    "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;margin: 0 auto;">
                  {{ tableDataBottom.sdxl110KvRecover || "0" }}</div>
              </td>
              <!-- 输电 35 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">跳闸</div>
                <div @click="hanleSd35(tableDataBottom.sdxl35KvRecover)"
                  style="font-size: 17px; font-weight: bold;color: #FF4F4F;margin: 0 auto;"
                  :class="tableDataBottom.sdxl35KvTrip ? 'borderBottomRed' : ''">{{ tableDataBottom.sdxl35KvTrip || "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;margin: 0 auto;">
                  {{ tableDataBottom.sdxl35KvRecover || "0" }}</div>
              </td>
              <!-- 变电站 500 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">停运</div>
                <div @click="handleBdz500" style="font-size: 17px; font-weight: bold; color: #31BAEE;"
                  :class="tableDataBottom.bdz500KvTrip ? 'borderBottomBlue' : ''">{{ tableDataBottom.bdz500KvTrip || "0"
                  }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold; color: #2EDF66;">{{ tableDataBottom.bdz500KvRecover ||
                  "0" }}
                </div>
              </td>
              <!-- 变电站 220 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">停运</div>
                <div @click="handleBdz220" style="font-size: 17px; font-weight: bold; color: #31BAEE;"
                  :class="tableDataBottom.bdz220KvTrip ? 'borderBottomBlue' : ''">{{ tableDataBottom.bdz220KvTrip || "0"
                  }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold; color: #2EDF66;">{{ tableDataBottom.bdz220KvRecover ||
                  "0" }}
                </div>
              </td>
              <!-- 变电站 110 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">停运</div>
                <div @click="handleBdz110" style="font-size: 17px; font-weight: bold; color: #31BAEE;margin: 0 auto;"
                  :class="tableDataBottom.bdz110KvTrip ? 'borderBottomBlue' : ''">{{ tableDataBottom.bdz110KvTrip || "0"
                  }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold; color: #2EDF66;margin: 0 auto;">
                  {{ tableDataBottom.bdz110KvRecover || "0" }}</div>
              </td>
              <!-- 变电站 35 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">停运</div>
                <div @click="handleBdz35" style="font-size: 17px; font-weight: bold; color: #31BAEE;margin: 0 auto;"
                  :class="tableDataBottom.bdz35KvTrip ? 'borderBottomBlue' : ''">{{ tableDataBottom.bdz35KvTrip || "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold; color: #2EDF66;margin: 0 auto;">
                  {{ tableDataBottom.bdz35KvRecover || "0" }}</div>
              </td>
              <!-- 配电 10 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">跳闸</div>
                <div @click="handlePd10" style="font-size: 17px; font-weight: bold;color: #FF4F4F;"
                  :class="tableDataBottom.pdxl10KvTrip ? 'borderBottomRed' : ''">{{ tableDataBottom.pdxl10KvTrip || "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;">{{ tableDataBottom.pdxl10KvRecover ||
                  "0" }}
                </div>
              </td>
              <!-- 台区及用户 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">停电</div>
                <div @click="handleTq" style="font-size: 17px; font-weight: bold;color: #31BAEE;margin: 0 auto;"
                  :class="tableDataBottom.tqTrip ? 'borderBottomBlue' : ''">{{ tableDataBottom.tqTrip || "0" }}</div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;">{{ tableDataBottom.tqRecover || "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复率</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;">{{ tableDataBottom.tqRater || "0%" }}
                </div>
              </td>
              <!-- 用户  -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">停电</div>
                <div style="font-size: 17px; font-weight: bold;color: #31BAEE;">{{ tableDataBottom.ptyhTrip || "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;">{{ tableDataBottom.ptyhRecover || "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复率</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;">{{ tableDataBottom.ptyhRater || "0%" }}
                </div>
              </td>
              <!-- 重要用户 -->
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">停电</div>
                <div @click="handleZyyh" style="font-size: 17px; font-weight: bold;color: #31BAEE;margin: 0 auto;"
                  :class="tableDataBottom.zyyhTrip ? 'borderBottomBlue' : ''">{{ tableDataBottom.zyyhTrip || "0" }}</div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;">{{ tableDataBottom.zyyhRecover || "0" }}
                </div>
              </td>
              <td colspan="1" align="center">
                <div style="margin-bottom: 10px; font-size: 18px;">恢复率</div>
                <div style="font-size: 17px; font-weight: bold;color: #2EDF66;">{{ tableDataBottom.zyyhRater || "0%" }}
                </div>
              </td>
            </tr>
          </tbody>

        </table>
      </div>
    </div>
    <!--  -->
    <el-dialog title="受损设备查看" :visible.sync="dialogTableVisible" width="60%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运输电线路名称" width="200">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="120">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ total }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-dialog>
    <el-dialog title="停运台区查看" :visible.sync="dialogTableVisible1" width="60%">
      <el-table :data="tableData222" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运台区名称" width="200">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="location" align="left" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ total1 }}条数据，共{{ pageNum1 }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total1">
        </el-pagination>
      </div>
    </el-dialog>
    <el-dialog title="停电重要用户查看" :visible.sync="dialogTableVisible2" width="60%">
      <el-table :data="tableData333" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停电重要用户" width="200">
        </el-table-column>
        <el-table-column prop="grade" align="center" label="客户等级" width="100">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="location" align="celeftnter" label="位置">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ total2 }}条数据，共{{ pageNum2 }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total2">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 变电站 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogConvertingStation" width="60%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运变电站名称" width="200">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="120">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ total }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-dialog>
    <!-- 配电 -->
    <el-dialog title="受损设备查看" :visible.sync="dialogDistributing" width="60%">
      <el-table :data="tableData111" :header-cell-style="{
        background: '#B1C8F9',
        color: '#000',
      }" style="width: 100%" border>
        <el-table-column prop="lineName" align="left" label="停运配电线路名称" width="200">
        </el-table-column>
        <el-table-column prop="voltageClasses" align="center" label="电压等级" width="120">
        </el-table-column>
        <el-table-column prop="unitName" align="left" label="所属单位">
        </el-table-column>
        <el-table-column prop="tripCause" align="left" label="停运/跳闸原因">
        </el-table-column>
        <el-table-column prop="blackoutTime" align="center" width="180" label="停电时间">
        </el-table-column>
        <el-table-column prop="recoverTime" align="center" width="180" label="复电时间">
        </el-table-column>
      </el-table>
      <div style="height: 20px"></div>
      <div style="margin-top: 10px; float: right" class="InformationList-table-pag flexBetween">
        <div class="fontSize14">共{{ total }}条数据，共{{ pageNum }}页</div>
        <el-pagination background layout="prev, pager, next" :total="total">
        </el-pagination>
      </div>
    </el-dialog>
  </div>
</template>
<script>
// import SjMapList from "./components/SjMapList.vue";getByAreaNameAndTime
import SjMapList from "../../EarlyWarningManagement/WarningAction/components/mapContent.vue";
import { homePageSelete, getYjsjGetById, getHomePageStatisticInfo, getHomePageInfoDetailList } from "@/api/EmergencyDisposal/zqbs.js";
import { getByAreaNameAndTimeCode } from "@/api/EmergencyDisposal/yjrb.js";
import "@/assets/style/Emergency.less";
import flv from "flv.js";
import SelectOptions from "@/components/selectOptions.vue";
import Axios from "axios";
export default {
  name: "DisasterReporting",
  components: { SjMapList, SelectOptions },
  data() {
    return {
      flvPlayer: null,
      tianqiData: [
        // {
        //   writeTime: "",
        //   dgdWp12: "",
        //   tmax: "",
        //   tmin: "",
        //   er03: "",
        //   eda10Direct: "",
        //   eda10: ""
        // }
      ],
      tqtbObj: {
        暴雪: "baoxue",
        暴雨: "baoyu",
        大雪: "daxue",
        大雨: "dayu",
        大雨转晴: "dayuzhuanqing",
        多云: "duoyun",
        多云转晴: "duoyunzq",
        晴转多云: "duoyunzq",
        雷阵雨: "leizyu",
        晴: "qing",
        闪电: "shandian",
        少云: "shaoyun",
        特大阵雨: "tedazhenyu",
        雾霾: "wumai",
        雾天: "wutian",
        小雪: "xiaoxue",
        小雨: "xiaoyu",
        扬沙: "yangsha",
        阴天: "yintian",
        雨夹雪: "yujiaxue",
        阵雨: "zhenyu",
        阵雨转晴: "zhenyuzhuanqing",
        中雪: "zhongxue",
        中雨: "zhongyu",
        中雨转小雨: "zhongyu",
        小雨转中雨: "zhongyu",
        阴转中雨: "zhongyu",
        晴转小雨: "xiaoyu",
        多云转小雨: "xiaoyu",
        小雨转阴: "xiaoyu",
        小雨转晴: "xiaoyu",
        阴转小雨: "xiaoyu",
        小雨转多云: "xiaoyu",
        晴转阴: "yintian",
        多云转阴: "yintian",
        阴: "yintian",
        阴转晴: "yintian",
        阴转多云: "yintian"
      },
      arr: [ // 视频设备
        // "150210000003020280",
        // "150210000003020281",
        "151310000003040557",
        "151310000003040559",
        "151310000003040560",
        "151310000003040562"
        // "150210000003020286",
        // "150210000003020287",
        // "150210000003020288"
      ],
      typeName: "",
      eventCode: "",
      yjsj_options: [], // 应急是事件options，
      boxDataList: {},
      pageNum: 1,
      pageNum1: 1,
      pageNum2: 1,
      total: 0,
      total1: 0,
      total2: 0,
      btnData: [
        {
          btn: "降水量",
          id: 0
        },
        {
          btn: "温度",
          id: 1
        },
        {
          btn: "风力风向",
          id: 2
        }
      ],
      tableHeaderColor({ row, column, rowIndex, columnIndex }) {
        // console.log(row)
        // console.log(column)
        // console.log(rowIndex)
        // console.log(columnIndex)
        if (column.label === "输电线路") {
          return "background-color: #1F55E4";
        } else if (column.label === "变电站") {
          return "background-color: #2A60EA";
        } else if (column.label === "配电线路") {
          return "background-color: #3F71F2";
          // }else if(column.label === '台区'){
        } else if (column.label === "台区及用户") {
          return "background-color: #5880E9";
        }
        if (columnIndex === 0 || columnIndex === 1 || columnIndex === 2 || columnIndex === 3 || columnIndex === 4 || columnIndex === 5 || columnIndex === 6 || columnIndex === 7 || columnIndex === 8 || columnIndex === 9 || columnIndex === 10 || columnIndex === 11 || columnIndex === 12 || columnIndex === 13 || columnIndex === 14 || columnIndex === 15 || columnIndex === 16 || columnIndex === 17 || columnIndex === 18 || columnIndex === 19 || columnIndex === 20 || columnIndex === 21 || columnIndex === 22 || columnIndex === 23 || columnIndex === 24 || columnIndex === 25 || columnIndex === 26) {
          return "background-color: transparent;";
        }

      },
      dialogTableVisible: false,
      dialogTableVisible1: false,
      dialogTableVisible2: false,
      dialogConvertingStation: false, // 变电站
      dialogDistributing: false, // 配电
      inputSite: "",

      tableDataBottom: {},
      tableData111: [],
      tableData222: [],
      tableData333: [],
      tabId: "",

      form: {
        place: ""
      },
      spUrl: "",
      pc: null,
      stream: null,
      effectRange: "",
      queryName: "武汉市"
      // today: ""
    };
  },
  beforeDestroy() {
    this.players.forEach(el => {
      el && el.destroy();
      el = null;
    });
    console.log("this.players", this.players);
  },
  created() {

  },
  mounted() {

    this.tianqi();
    this.players = [];
    this.forArr();
    this.GetAlertInformation();
    // this.tableList()

  },
  methods: {
    async tianqi() {
      var dateTime = new Date();
      var year = dateTime.getFullYear();
      var month = dateTime.getMonth() + 1;
      var day = dateTime.getDate();
      month = (month > 9) ? month : ("0" + month);
      day = (day < 10) ? ("0" + day) : day;
      var today = year + "-" + month + "-" + day;
      console.log(today);
      console.log(this.queryName);
      // var parmas = {
      //   areaName: effectRange,
      //   date: ""
      // };
      // console.log(parmas, "parmasparmasparmas");
      // const res = await getByAreaNameAndTimeCode({ areaName: this.effectRange });
      const res = await getByAreaNameAndTimeCode({ areaName: this.queryName, date: today });
      // const res = await getByAreaNameAndTimeCode({ areaName: this.queryName });
      console.log(this.effectRange, "this.effectRangethis.effectRangethis.effectRangethis.effectRange");
      this.tianqiData = res;
    },
    forArr() {
      this.arr.forEach((item) => {
        this.play(item);
      });
    },
    play(devCode) {
      const videourl = process.env.VUE_APP_SHIPIN_URL;
      const url = `${videourl}/ems/v1/uvp/api/playvideo?code=${devCode}`;
      Axios.get(url).then(res => {
        if (res.status === 200) {
          let location = res.data.location;
          if (location) {
            const path = location.split("/mediatranscode")[1];
            location = `${videourl}/mediatranscode${path}`;
          }
          var videoElement = document.getElementById(`flv-${devCode}`);
          const flvPlayer = flv.createPlayer({
            type: "flv",
            url: location
          }, {
            autoCleanupSourceBuffer: true, // 对SourceBuffer进行自动清理
            autoCleanupMinBackwardDuration: 10, // 指示进行自动清除时为反向缓冲区保留的持续时间（以秒为单位）。
            isLive: true,
            lazyLoadMaxDuration: 60
          });
          flvPlayer.attachMediaElement(videoElement);
          flvPlayer.load();
          flvPlayer.play();
          this.players.push(flvPlayer);
        }
      });
      // Axios({
      //   xhrFields: {
      //     withCredentials: true
      //   },
      //   async: false,
      //   method: "get",
      //   contentType: "application/json",
      //   dataType: "json",
      //   url: url,
      //   success: function (result) {
      //     const { location } = result;
      //     console.log(location);
      //     var videoElement = document.getElementById(`flv-${devCode}`);
      //     var flvPlayer = flv.createPlayer({
      //       type: "flv",
      //       url: location
      //     });
      //     flvPlayer.attachMediaElement(videoElement);
      //     flvPlayer.load();
      //     flvPlayer.play();
      //   }
      // });
    },
    childData(param) {
      if (param) {
        this.typeName = param[0].name;
        this.$nextTick(() => {
          // this.TeamLeftPie() // 饼图
          // this.TeamRightLBar() // 柱状图
        });
      }
    },
    tableRowClassName({ row, rowIndex }) {
      console.log(row);
      console.log(rowIndex);
      // console.log(rowIndex)
      //   if (rowIndex === 0) {
      //     return 'warning-row';
      //   } else if (rowIndex === 3) {
      //     return 'success-row';
      //   }
      //   return '';
    },
    GetAlertInformation() {
      const parmas = {
        // pageNum: 1,
        // pageSize: 10
      };
      homePageSelete(parmas).then(res => {
        console.log(res);
        const option = res.map((item) => {
          return {
            // label: item.judgeName,
            // value: item.id
            label: item.emergencyEvent,
            value: item.id
            // ...item
          };
        });
        this.yjsj_options = option;
        console.log(this.yjsj_options);
        this.eventCode = this.yjsj_options[0].value;
        console.log(this.eventCode);
        // this.eventTypeCode = Number(res[0].eventCode)
        this.changes(this.eventCode);
      });
    },
    getYjtzdCity(effectRange, index = 1) {
      this.effectRange = effectRange;
      this.tianqi();
      const arr = effectRange.split("、").filter(el => el.includes("县") || el.includes("市") || el.includes("区"));
      // const arr = effectRange.split("、");
      const newEffList = [];
      arr.forEach(el => {
        if (el.startsWith("湖北省") && (!el.endsWith("省"))) {
          newEffList.push(el.split("省")[1]);
        } else {
          newEffList.push(el);
        }
      });
      const list = [];
      newEffList.forEach(el => {
        if (el.endsWith("县") || el.endsWith("区")) {
          if (el.includes("市")) {
            list.push(el.split("市")[1]);
          } else {
            list.push(el);
          }
        } else if (el.endsWith("市")) {
          if (el.includes("自治州")) {
            list.push(el.split("自治州")[1]);
          } else {
            const index1 = el.indexOf("市");
            const index2 = el.lastIndexOf("市");
            if (index1 === index2) {
              list.push(el);
            } else {
              list.push(el.slice(index1 + 1));
            }
          }
        }
      });
      const newList = [...new Set(list)];
      this.initLayer(newList[0]);
    },
    initLayer(name = "湖北省") {
      console.log(name);
      this.queryName = name;
      console.log(this.queryName);
      this.$eventBus.$emit("createlayer", name);
    },
    changes(val) {
      console.log(val);
      this.tabId = val;
      getYjsjGetById({ id: val }).then(res => {
        console.log(res);
        this.boxDataList = res;
        this.getYjtzdCity(res.effectRange);
        // this.tianqi(res.effectRange);
        this.effectRange = res.effectRange;
      });
      this.tableList();

    },
    async tableList() {
      const parmas = {
        emergencyId: this.eventCode
      };
      const res = await getHomePageStatisticInfo(parmas);
      console.log(res);
      this.tableDataBottom = res;
      console.log(this.tableDataBottom);
      // this.reportTime = res.reportTime
      // console.log(this.reportTime)
      // this.paginationAtrrs.total = res.total
    },
    // 更多
    handleMore() {
      this.$router.push("/DisasterInformationStatistics");
    },
    // 输电500
    async hanleSd500(val) {
      this.dialogTableVisible = true;
      // console.log(val, "输电500")
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "500kV", // 	电压等级
        specialtyCode: "sdxl" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      // console.log(res, "shudian500")
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 输电220
    async hanleSd220() {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "220kV", // 	电压等级
        specialtyCode: "sdxl" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 输电110
    async hanleSd110() {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "110kV", // 	电压等级
        specialtyCode: "sdxl" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 输电 35
    async hanleSd35() {
      this.dialogTableVisible = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "35kV", // 	电压等级
        specialtyCode: "sdxl" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 变电站  500
    async handleBdz500() {
      this.dialogConvertingStation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "500kV", // 	电压等级
        specialtyCode: "bdz" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 变电站  220
    async handleBdz220() {
      this.dialogConvertingStation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "220kV", // 	电压等级
        specialtyCode: "bdz" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 变电站  110
    async handleBdz110() {
      this.dialogConvertingStation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "110kV", // 	电压等级
        specialtyCode: "bdz" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 变电站  35
    async handleBdz35() {
      // this.dialogTableVisible = true;
      this.dialogConvertingStation = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "35kV", // 	电压等级
        specialtyCode: "bdz" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 配电线路  10
    async handlePd10() {
      // this.dialogTableVisible = true;
      this.dialogDistributing = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "10kV", // 	电压等级
        specialtyCode: "pdxl" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total = res.total;
      this.tableData111 = res.data;
    },
    // 台区及用户
    // 台区
    async handleTq() {
      this.dialogTableVisible1 = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "", // 	电压等级
        specialtyCode: "tq" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total1 = res.total;
      this.tableData222 = res.data;

    },
    // 用户
    async handleYh() {
      this.dialogTableVisible2 = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "", // 	电压等级
        specialtyCode: "ptyh" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total2 = res.total;
      this.tableData333 = res.data;
    },
    // 重要用户
    async handleZyyh() {
      this.dialogTableVisible2 = true;
      const parmas = {
        pageNum: this.pageNum,
        pageSize: 10,
        emergencyId: this.eventCode, // 应急事件id
        voltageClasses: "", // 	电压等级
        specialtyCode: "zyyh" // 线路编码
      };
      const res = await getHomePageInfoDetailList(parmas);
      this.total2 = res.total;
      this.tableData333 = res.data;
    }
  }
};
</script>

<style scoped lang="less">
@import "../../../assets/style/DisasterInformation.less";

.Emergency {
  height: 100%;
  padding: 0px 20px;
  margin: 0;

  :deep(.el-breadcrumb) {
    font-size: 16px;
    line-height: initial;
  }

  :deep(.el-breadcrumb__inner.is-link) {
    font-weight: 100;
    color: #fff;
  }

  :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner) {
    color: #3270ff;
  }

  .Emergency-tb-bd {
    width: 100%;
    height: 8%;

    .flexBetweens {
      align-items: center;
    }

    :deep(.el-form) {
      margin-top: 10px;
    }

    :deep(.el-form-item__label) {
      font-family: PingFang SC;
      font-weight: 400;
      font-style: normal;
      color: #fff;
    }

    :deep(.el-form-item__content) {
      width: 60%;
    }

    :deep(.el-input__inner) {
      background-color: rgba(34, 88, 143, 1);
      border: #3270ff 1px solid;
      color: #fff;
      font-size: 18px;
      font-weight: bold;
    }
  }

  .Emergency-center {
    width: 100%;
    height: 65%;
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .Emergency-tb-bt {
      width: 100%;
      height: 33%;
      // border: #3270ff 1px solid;
      border-radius: 4px;

      :deep(.el-input__inner) {
        height: 23px;
        line-height: 23px;
        border: #3270ff 1px solid;
        color: #eeeeee;
        background-color: rgba(34, 88, 143, 1);
      }
    }

    .Emergency-dt {
      width: 45%;
      height: 100%;
      border: 1px solid rgb(34, 88, 143);
    }

    .Emergency-tb {
      width: 54%;
      height: 100.3%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .overflowHideen {
        //超出滚动
        border: 1px solid rgb(34, 88, 143);
        overflow: auto;
        height: 28%;
        margin-bottom: 6px;

        .text_content {
          width: 98%;
          overflow: auto;

          :deep(.el-input__inner) {
            height: 23px;
            line-height: 23px;
            border: 1px solid rgb(34, 88, 143);
            color: #eeeeee;
            background-color: rgba(34, 88, 143, 1);
          }
        }
      }

      .el-header,
      .el-footer {
        // background-color: #265cff;
        background-color: rgba(38, 92, 255, 0.45);
        color: #333;

        line-height: 40px;
      }

      .conter_content {
        width: 100%;
        height: 68%;
        display: flex;

        >div {
          flex: 1;
        }

        .one_num {
          display: flex;
          flex-direction: column;

          >div {
            flex: 1;

            .content_font {
              display: flex;
              justify-content: space-between;
              align-items: center;
              height: 60px;
              background: #0d2652;
              border-radius: 6px;
              padding: 10px;
              margin: 25px 10px 20px 10px;

              .guowang {
                width: 85%;
                color: #3270ff;
                font-size: 14px;
              }

              .huangse {
                width: 10%;
                border: 1px solid #ffff00;
                color: #ffff00;
                border-radius: 4px;
                font-size: 14px;
                font-weight: 600;
                padding: 2px 4px;
                text-align: center;
              }
            }

            .weather_situation {
              display: flex;
              justify-content: space-between;

              .weather_tabs {
                display: flex;
                align-items: center;

                div {
                  border: 1px solid #148af3;
                  height: 30px;
                  line-height: 30px;
                  text-align: center;
                  margin: 0 4px;

                  span {
                    margin: 6px 4px;
                  }
                }
              }
            }
          }
        }
      }

      .video_input {
        display: flex;
        justify-content: space-between;
        padding: 10px;

        :deep(.el-input__inner) {
          height: 40px;
          line-height: 40px;
          border: #148af3 1px solid;
          color: #fff;
          background-color: rgba(34, 88, 143, 1);
        }

        :deep(.el-button) {
          border: #148af3 1px solid;
          color: #fff;
          font-size: 14px;
          background-color: #14a8ed;
        }
      }

      .video_img {
        width: 520px;
        display: flex;
        flex-wrap: wrap;

        // padding: 10px 20px;
        // justify-content: space-between;
        img {
          margin: 10px 10px;
          // width: 50%;
          // margin-bottom: 10px;
        }
      }


    }
  }
}

.display_flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
}

.content_center {
  width: 10px;
  margin: 0 auto;
}

.color_fff {
  color: #fff;
}

.select {
  display: inline-block;
  width: 100%;
  height: 100%;
  position: relative;
  vertical-align: middle;
  padding: 0;
  overflow: hidden;
  border: none;
  opacity: 0.7;
  border-radius: 4px;
  // box-shadow: 1px 1px 10px 2px rgb(60, 213, 260) inset;
  // border-radius: 4px;
  // background: rgba(0, 127, 207, 0.8);
  text-shadow: none;
  transition: box-shadow 0.25s ease;
  z-index: 2;
}

.tianqiqingkuang {
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-left: 20px;

  .wendu {
    margin-left: 30px;
    color: #fff;

    >div {
      margin: 10px 0;
    }
  }
}

.select:hover {
  box-shadow: 1px 1px 10px 2px rgb(43, 140, 243) inset;
}

.select:before {
  content: "";
  position: absolute;
  width: 0;
  height: 0;
  border: 6px solid transparent;
  border-top-color: #fff;
  top: 45%;
  right: 10px;
  cursor: pointer;
  z-index: -2;
}

.select select {
  cursor: pointer;
  color: rgb(255, 255, 255);
  font-weight: bold;
  font-size: 16px;
  padding: 4px 10px;
  width: 100%;
  height: 100%;
  border: none;
  background: transparent;
  background-image: none;
  -webkit-appearance: none;
  -moz-appearance: none;

  option {
    padding-top: 15px;
    padding-bottom: 15px;
    background: rgba(46, 88, 219, 0.5);
    color: #fff;
  }
}

.select select:focus {
  outline: none;
}

// .tab_btn {
//   margin-top: 10px;
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }
.transmission_select,
.content_lj {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 10px 20px 0 20px;
  height: 30px;

  >div {
    color: #fff;
    font-size: 14px;
    // margin-bottom: 30px;
  }
}

/deep/ .el-header {
  padding: 0 12px;
}

.content_btn {
  padding: 0 30px;

  >div {
    width: 130px;
    height: 46px;
    font-size: 14px;
    font-weight: 600;
    background: #0649d7;
    border-radius: 5px;
    text-align: center;
    line-height: 46px;
  }
}

.tab_content {
  // height: 100px;
  width: 100%;

  // background: red;
  .tab_bg {
    display: flex;
    justify-content: space-between;
    align-content: center;
    background: #193f8e;
    height: 35px;
    align-items: center;
    padding: 0 20px;
    border-radius: 3px;

    >div {
      flex: 1;
      text-align: center !important;
    }
  }

  .table_line {
    height: 50px;
    width: 2px;
    background: #193f8e;
  }

  .table {
    margin-top: 10px;
    padding: 0 10px;
    display: flex;
    justify-content: space-between;
    text-align: center;
  }

  .top {
    margin-top: 15px;
  }
}

.content_bottom {
  margin: 10px 0;
  font-size: 12px;
  color: #fff;
  display: flex;
  justify-content: space-between;
  text-align: center;
}

.border_line {
  border: 1px solid rgb(34, 88, 143);
}

.active {
  color: #fff;
  background: #14a8ed;
}

.el-table .warning-row {
  background: red;
}

//
.firstHead {
  color: #fff;

  tr {
    th {
      height: 30px;
    }
  }
}

table {
  border: none;
  // border: 1px solid #f5f5f5;
  // border-width:1px 0px 0px 1px;
  // border-collapse:collapse;
  width: 100%;
  // color: #909399;
  margin-bottom: 10px;
}

td {
  border: 1px solid #2c7498;
  border-width: 0px 1px 1px 0px;
  padding: 10px;
  height: 50px;
  text-align: center;
  font-size: 12px;
  color: #fff;
}

th {
  border: 1px solid #2c7498;
  border-width: 0px 1px 1px 0px;
  color: #fff;
}

//
.Emergency-tb-bt /deep/ .el-table__header {
  width: -200px !important;
}

.el-table .success-row {
  background: yellow;
}

.Emergency-tb-bt /deep/ .el-table,
.el-table__expanded-cell {
  background-color: transparent;
}

.Emergency-tb-bt /deep/ .el-table__body {
  color: #fff !important;
}

.Emergency-tb-bt /deep/ .el-table tr {
  background-color: transparent !important;
}

.Emergency-tb-bt /deep/ .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  // background: rgba(255, 255, 255, 0.2);
  color: #fff;
}

.Emergency-tb-bt /deep/ .el-table__cell {
  border-right: 1px solid #37799a !important;
}

.Emergency-tb-bt /deep/ .el-table--group {
  border: none;
}

.Emergency-tb-bt /deep/ .el-table--group::after {
  background: none;
}

.Emergency-tb-bt /deep/ .el-table td {
  border-bottom: 0px solid #dfe6ec !important;
}

.Emergency-tb-bt /deep/ .el-table th {
  border-bottom: 0px solid #dfe6ec !important;
}

.Emergency-tb-bt /deep/ .el-table--enable-row-hover .el-table__body tr:hover>td.el-table__cell {
  background-color: transparent;
}

/deep/ .el-table__body tr:hover>td {
  background-color: rgba(255, 255, 255, 0.2);
}

/deep/ .el-table__body tr.current-row>td {
  background-color: rgba(255, 255, 255, 0.2);
}

/deep/ .el-table thead {
  color: #fff;
}

.VideoCard {
  height: 100%;
}

.Search {
  width: 93%;
  margin: 10px auto;

  :deep(.el-button--primary) {
    background: #007fcf;
    border-color: #14a8ed;
  }
}

.right {
  :deep(.el-input__inner) {
    width: 95%;
    background-color: rgba(0, 127, 207, 0.2);
    border: 1px solid #14a8ed;
    color: #ccc;
  }
}

.btn {
  :deep(.el-button--small) {
    margin-left: 8px;
    height: 30px;
    margin-top: 5px;
    font-size: 14px;
  }
}

.vidoeDiv {
  flex-wrap: wrap;
  height: 68%;

  .img {
    width: 48%;
    height: 50%;
    margin-bottom: 10px;

    img,
    video {
      width: 100%;
      height: 100%;
      object-fit: fill;
    }
  }
}

.length_2 {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden; //溢出内容隐藏
  text-overflow: ellipsis; //文本溢出部分用省略号表示
  display: -webkit-box; //特别显示模式
  -webkit-line-clamp: 1; //行数
  line-clamp: 1;
  -webkit-box-orient: vertical; //盒子中内容竖直排列
}

.borderBottomRed {
  border-bottom: 1px solid #ff4f4f;
}

.borderBottomGreen {
  border-bottom: 1px solid #2edf66;
}

.borderBottomBlue {
  border-bottom: 1px solid #31baee;
}

// 滚动条样式
:deep(div::-webkit-scrollbar-track) {
  border-radius: 0;
  background: transparent;
}

:deep(div::-webkit-scrollbar-thumb) {
  border-radius: 10px;
  box-shadow: none;
  background: rgba(215, 215, 215, 0.4);
}

:deep(div::-webkit-scrollbar) {
  width: 5px;
}

.Emergency-tb-bd {
  :deep(.select-class .el-select) {
    width: 100%;
    border: none;
    box-shadow: 1px 1px 10px 2px rgb(54, 175, 255) inset;
    border-radius: 4px;
    background: rgba(46, 88, 219, 0.5);
    text-shadow: none;
    transition: box-shadow 0.25s ease;

    .el-input .el-input__inner {
      height: 40px;
      line-height: 40px;
      font-size: 18px;
      font-weight: 700;
    }
  }
}
</style>
